<template>
    <ElCard class="h-full flex flex-col gap-4" body-class="flex min-h-0 flex-1">
        <template #header>
            <p class="text-center font-bold text-2xl">百宝箱</p>
            <p class="text-center">{{ checkTreasure.title }}</p>
        </template>
        <div class="flex-1  w-full flex">
            <ElScrollbar class="w-full  flex flex-col flex-1">
                <ElCarousel>
                    <ElCarouselItem v-for="item in checkTreasure.treasure" :key="item.id">
                        <div class="w-full h-full bg-gray-100 flex items-center justify-center"
                            @click="openLink(item.link)">
                            <ElImage class="h-full" fit="contain" :src="item.image"></ElImage>
                        </div>
                    </ElCarouselItem>
                </ElCarousel>
                <ElDivider></ElDivider>
                <div class="grid grid-cols-3 gap-2">
                    <ElCard v-for="item in checkTreasure.treasure" :key="item.id" class="flex flex-col"
                        body-class="flex-1" @click="openLink(item.link)">
                        <template #header>
                            <div class="card-header h-6 flex gap-2 items-center">
                                <ElImage class="h-full" fit="fill" :src="item.image"></ElImage>
                                <p class="font-bold text-xl">{{ item.name }}</p>
                            </div>
                        </template>
                        <div class="h-full">
                            <div v-for="value in item.brief.split('\n')" class="card-body">{{ value }}</div>
                        </div>
                        <template #footer>
                            <p class="text-end h-6">{{ item.createTime }}</p>
                        </template>
                    </ElCard>
                </div>
            </ElScrollbar>
        </div>
    </ElCard>
</template>

<script setup lang='ts' name=''>
import { getTreasure } from '@/api/function'
import { ref } from 'vue'
import { ElCard, ElCarousel, ElCarouselItem, ElImage, ElDivider, ElScrollbar } from 'element-plus'
const checkTreasure = ref<any>({
    title: '',
    treasure: ''
})
const openLink = (url: string) => {
    if (url) {
        window.open(url, '_blank')
    }
}

getTreasure().then(res => {
    checkTreasure.value = res.data
})
</script>

<style scoped></style>